<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="jquery.min.js"></script>
  </head>
  <body>
    <div class="box1">111</div>
    <div class="box2">22222</div>
    <div class="box3">33333</div>
    <div class="box4">4444</div>
    <div class="box5"><span>我是span</span></div>
    <div class="box6"></div>
    <script>
      // 1.相邻选择器 ； + 下一个相邻的兄弟元素
      //   $(".box1+.box2").css("color", "red");

      //    2.后面的所有的兄弟元素 ；~
      //   $(".box1~.box4").css("color", "red");

      // 3.获取元素中索引为奇数的元素；  :odd
      //   $("div:odd").css("color", "red");

      // 4.获取元素中所有索引为偶数的元素： even
      //   $("div:even").css("color", "red");

      // 5.获取所有元素中的第一个元素；first
      //   $("div:first").css("color", "red");

      // 6.获取所有元素中的最后一个元素:last
      // $("div:last").css("color","red");

      // 7.选取指定索引的元素 eq(index);
      // $("div:eq(2)").css("color","red");

      // 8.选取元素索引大于某个值  gt(index);
      // $("div:gt(1)").css("color","red");

      // 9.选取元素索引小于某个值 lt(index);
      // $("div:lt(2)").css("color","red");

      // 10.选取类名不是某个类名的其他元素；not(不是这个类名)
      //   $("div:not(.box3)").css("color", "red");

      // 11.选取元素中包含某些文本的元素；
      //   $("div:contains(1)").css("color", "pink");

      // 12.选取所有元素中的空元素；
      // $("div:empty").css({ width: "100px", height: 100, background: "red" });
      // 13.选取元素中包含某个元素的 元素；
      //   $("div:has(span)").css("color", "red");
    </script>
  </body>
</html>
